<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">

  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
  <script src="../dist/jsoneditor.js"></script>

  <style type="text/css">
    body {
      font: 10.5pt arial;
      color: #4d4d4d;
      line-height: 150%;
      width: 500px;
      padding-left: 40px;
      background: #f5f5f5;
    }

    code {
      background-color: #f5f5f5;
    }

    #jsoneditor {
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>

<p>
  Switch editor mode using the mode box.
  Note that the mode can be changed programmatically as well using the method
  <code>editor.setMode(mode)</code>, try it in the console of your browser.
</p>

<form>
  <div id="jsoneditor"></div>
</form>

<p>
  <button id="update">Update</button>
</p>

<p>
  <iframe></iframe>
</p>

<script>
  var container, options, json, editor;

  container = document.getElementById('jsoneditor');

  options = {
    mode: 'tree',
    modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
    onError: function (err) {
      console.error(err);
      alert(err.toString());
    },
    onChange: function () {
      console.log('onChange');
      editorTest.refresh()
    },
    onChangeJSON: function (json) {
      console.log('onChangeJSON', json);

      // test feedback loop which is typical in React -> should not change anything
      editorTest.update(json)
    },
    onChangeText: function (text) {
      console.log('onChangeText', text);
    },
    onFocus: function(event) {
      console.log('Focus : ',event);
      container.style.outline = '5px solid red';
    },
    onBlur: function(event) {
      console.log('Blur : ',event);
      container.style.outline = '';
    },
    indentation: 4,
    // escapeUnicode: true,
    limitDragging: true
  };

  json = {
    "array": [1, 2, [3,4,5]],
    "boolean": true,
    "color": "#82b92c",
    "htmlcode": '&quot;',
    "escaped_unicode": '\\u20b9',
    "unicode": '\u{1F600},\uD83D\uDCA9',
    "return": '\n',
    "null": null,
    "number": 123,
    "object": {"a": "b", "c": "d"},
    "string": "Hello World",
    "timestamp": 1534952749890,
    "url": "http://jsoneditoronline.org",
    "<button onclick=alert('oopsie!!!')>test xss</button>": "xss?",
    "xss array": [
      {
        "<button onclick=alert('oopsie!!!')>test xss</button>": "xss?"
      }
    ]
  };

  editorTest = new JSONEditor(container, options, json);

  console.log('json', json);
  console.log('string', JSON.stringify(json));


  const update = document.getElementById('update')
  update.onclick = function () {
    const json2 = {
      "array": [1, 2, [3,4,5]],
      "array2": [1, 2, [3,4,5]],
      "url": "http://jsoneditoronline.org",
      "boolean": true,
      "color": "#82b92c",
      "htmlcode": '&quot;',
      "escaped_unicode": '\\u20b9',
      "unicode": '\u20b9,\uD83D\uDCA9',
      "return": '\n',
      "null": null,
      "number": 123,
      "object": {"a": "b", "c": "d"},
      "string": "Hello World",
      "timestamp": 1534952749890
    };

    editorTest.update(json2)
  }
</script>
</body>
</html>
